<template>
  <div class="did-h">
    <div class="black black-h">
      <div>通过凭证模板发行凭证。</div>
      <el-row :gutter="20" class="mt3">
        <el-col :span="10" :offset="6">
          <el-form label-position="right" label-width="180px" :model="form">
            <el-form-item label="发行者DID" >
              <el-input v-model="form.issuer" placeholder="请输入发行者的DID"></el-input>
            </el-form-item>
            <el-form-item label="发行者私钥" >
              <el-input v-model="form.privateKey" placeholder="请输入发行者的私钥"></el-input>
            </el-form-item>
            <el-form-item label="发行者公钥ID" >
              <el-input v-model="form.publicKeyId" placeholder="请输入发行者的公钥ID"></el-input>
            </el-form-item>
            <el-form-item label="凭证模板CPT ID" >
              <el-input v-model="form.cptId" placeholder="请输入凭证模板CPT ID" @change="cptIdChange"></el-input>
            </el-form-item>
            <el-form-item label="凭证到期时间">
              <el-date-picker v-model="form.expireDate" type="date" placeholder="请选择到期时间"> </el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" align="center"> </el-table-column>
        <el-table-column prop="name" label="字段名" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" readonly placeholder="请输入字段名"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="字段值" align="center">
            <template slot-scope="scope">
            <el-input v-model="scope.row.describe" placeholder="请输入字段描述"></el-input>
          </template>
        </el-table-column>
<!--        <el-table-column align="center" width="50"> -->
<!--          <template slot-scope="scope">-->
<!--            <i  v-if="scope.$index!==0" class="el-icon-remove-outline cursor" @click="delClick(scope.$index)"></i>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
<!--      <div class="add-button" @click="addClick">-->
<!--           添加-->
<!--      </div>-->
      <div class="did-button">
        <el-button size="medium" type="primary" @click="issuing">发行凭证</el-button>
      </div>
    </div>
    <div class="black mt1 black-height">
          <ul>
            <li class="publicKey">
              <span class="span">凭证ID：</span>
              <span class="span-key">{{ data.id }}</span>
            </li>
            <li class="publicKey">
              <span class="span">凭证模板CPT ID：</span>
              <span class="span-key">{{ data.cptId }}</span>
            </li>
            <li class="publicKey">
              <span class="span">发行者DID：</span>
              <span class="span-key">{{ data.issuer }}</span>
            </li>
<!--            <li class="publicKey">-->
<!--              <span class="span">创建日期；</span>-->
<!--              <span class="span-key">{{ data.issuanceDate }}</span>-->
<!--            </li>-->
<!--            <li class="publicKey">-->
<!--              <span class="span">到期日期：</span>-->
<!--              <span class="span-key">{{ data.expirationDate }}</span>-->
<!--            </li>-->
            <li class="publicKey">
              <span class="span">凭证声明数据</span>
            </li>
            <li>
              <span class="span-key">
                <el-table :data="claim" style="width: 100%">
                     <el-table-column prop="name" label="字段名"></el-table-column>
                     <el-table-column prop="value" label="内容" ></el-table-column>
                </el-table>
              </span>
            </li>
            <li class="publicKey">
              <span class="span">上下文格式：</span>
              <span class="span-key">{{ data.context }}</span>
            </li>
            <li class="publicKey">
              <span class="span">凭证类型：</span>
              <span class="span-key" v-if="data.type">
                {{data.type.join('；')}}
                <!--                <span v-for="(item,key) in data.context" :key="key">-->
                <!--                  {{item}}-->
                <!--                </span>-->
              </span>
            </li>
            <li class="publicKey">
              签名数据
            </li>
            <li>
              <span class="span-key">
                <el-table :data="proof" style="width: 100%">
                     <el-table-column prop="creator" label="发行者"></el-table-column>
                     <el-table-column prop="signatureValue" label="签名" ></el-table-column>
                     <el-table-column prop="type" label="类型" width="100px">
                     </el-table-column>
                </el-table>
              </span>
            </li>
            <li class="publicKey">
              <span class="span">签名数据类型：</span>
              <span class="span-key">{{ data.proofType }}</span>
            </li>
          </ul>

      <!-- <NoData class="nodata" /> -->
    </div>
  </div>
</template>
<script>
import NoData from '../../../components/noData.vue';
export default {
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      form: {
         issuer:'',
         privateKey:'',
         cptId:'',
         expireDate:'',
         claimData:{},
         publicKeyId:''
      },
      tableData: [{ name: '', describe: '' }],
      options: [
        {
          value: 'String',
          label: 'String',
        },
        {
          value: 'integer',
          label: 'integer',
        },
      ],
      rules: {
        cptId: [{ required: true, message: '请输入CPT模板ID', trigger: 'blur' }],
      },
      data: {
        id:'',
        cptId: '',
        issuer: '',
        claim: '',
        proofType: '',
        issuanceDate: '',
        expirationDate: ''
      },
      claim:[],
      proof:[]
    };
  },
  mounted() {},
  methods: {
    issuing() {
       this.issuingCredential();
    },
    addClick(){
      let arr = [{ name: '', describe: '' }]
      this.tableData.push(arr);
    },
    delClick(index){
      this.tableData.splice(index,1)
    },
    cptIdChange(){
      this.queryClaim()
    },
    async queryClaim(){
      let parmas = {
        cptId:this.form.cptId
      }
      this.tableData = [];

      let res = await this.$http.post(this.$api.credential.queryClaim, parmas);
      if (res.code == 200) {
         res.data.forEach(item =>{
           this.tableData.push({
             name:item.type,
             describe:item.value
           })
         })

      }
    },
    async issuingCredential(){
         this.proof = []
         let att = []
         this.tableData.forEach(item =>{
           this.form.claimData[item.name] = item.describe
        });
        let res = await this.$http.post(this.$api.credential.issuingCredential, this.form);
        if (res.code == 200) {
          this.data = res.data;
          this.proof.push(res.data.proof);
          for (const resKey in res.data.claim) {
            att.push({
              name:resKey,
              value:res.data.claim[resKey]
            })
          }
          this.claim = att
          // this.data.raw = res.data;
        }
    }
  },
};
</script>
<style lang="less" scoped>
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}
.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.m-a0 {
  margin: 0 auto;
}
.black-h {
  height: 50%;
  overflow-y: auto;
}
.black-height {
  height: calc(50% - 90px);
  overflow-y: auto;
}
.black-height ul{
  width: 90%;
  margin: 0 auto;
}
.nodata {
  margin-top: 10%;
}
.did-width {
  width: 500px;
  margin: 0 auto;
}
.text-c {
  text-align: center;
}
.add-button{
  width: 100%;
  padding:8px 0 ;
  background: #FCA400;
  color: white;
  border: 1px dashed #ccc;
  text-align: center;
  border-radius: 3px;
  margin-top: 10px;
  cursor: pointer;
}
.cursor{
  cursor: pointer;
}
.publicKey {
  display: flex;
  line-height: 30px;
  .span {
    width: 470px;
  }
  .span-key {
    width: calc(100% - 50px);
    word-break: break-word;
    white-space: pre-line;
  }
}
</style>
